<template>
    <div id="app">
        <!--<img alt="Vue logo" src="./assets/logo.png">-->
        <!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->
        <input type="text" v-model="name" placeholder="lesson name">
        <input type="number" v-model="price" placeholder="lesson price">
        <button @click="addToLessonList">添加一门</button>
        <ul>
            <li v-for="(item,index) in lessonList" :key="index">
                <span>{{item.name}}</span>
                <span>======</span>
                <span>{{item.price}}</span>
                <span @click="addToCart(index)" :style="{cursor:'pointer'}">add to cart</span>
            </li>
        </ul>
        <hr>
        <Cart/>
    </div>
</template>

<script>
    import axios from 'axios';
    //import HelloWorld from './components/HelloWorld.vue'
    import Cart from './components/Cart'

    export default {
        name: 'app',
        components: {
            //HelloWorld,
            Cart
        },
        data() {
            return {
                name:'',
                price:'',
                lessonList: []
            }
        },
        created(){
            axios.get('/api/lessons').then(ret=>{
                //console.log(ret.data)
                this.lessonList = ret.data.lessonList;
            })
        },
        methods:{
            addToCart(index){
                //console.log('add to cart',this.lessonList[index]);
                this.$bus.$emit('addToCart',this.lessonList[index]);
            },
            addToLessonList(){
                if(this.name&&this.price>0){
                    this.lessonList.push({name:this.name,price:this.price});
                    this.name='';this.price=0;
                }
            }
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
